<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="知识产品及专利转让">
          <v-chart v-if="optionZscpzlzr.isShow" ref="zscpjzlzr" :options="optionZscpzlzr" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农业培训">
          <v-chart v-if="optionCyrkqk.isShow" ref="nypx" :options="optionCyrkqk" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="专家服务情况" :ph="300"> <v-chart v-if="optionZjfuqk.isShow" :options="optionZjfuqk" /> </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.14%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="技术成果及专利转让金额">
          <v-chart v-if="optionJscgjzlzrje.isShow" ref="zscpjzlzr" :options="optionJscgjzlzrje" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="农业政策">
          <v-chart v-if="optionZZFBXX.isShow" :options="optionZZFBXX" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农业图谱" :ph="300">
          <v-chart :is-show="hotWordsList.isShow" :options="hotWordsList" />
        </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import { getTowSideStat, hotWords } from '@/api/connector'
import Particulars from 'header/particulars.vue'
import echarts from 'echarts'
import { getHandle } from '@/api'
import { formatNumber } from '@/utils/app'
import PageHeader from 'header/PageHeader.vue'
import 'echarts-wordcloud'
import YlTable from 'header/yltable'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'AgriculturalTechnology',
  components: { PageHeader, Particulars },
  data() {
    return {
      optionCyrkqk: {
        isShow: false,
        tooltip: tooltip('场次', '人次'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: '场次',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            splitLine: {
              // 分割线配置
              lineStyle: {
                color: '#ffffff'
              }
            }
          },
          {
            name: '人次',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            splitLine: {
              // 分割线配置
              lineStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: []
      },
      optionZjfuqk: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + formatNumber(value) + '次' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            name: '次',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      },
      hotWordsList: {
        isShow: false,
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 30
          }
        },
        series: [
          {
            type: 'wordCloud',
            // 网格大小，各项之间间距
            gridSize: 30,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: 'line',
            // 字体大小范围
            sizeRange: [14, 60],
            // 文字旋转角度范围
            rotationRange: [0, 0],
            // 旋转步值
            rotationStep: 0,
            // 自定义图形
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            // 画布宽
            width: '90%',
            // 画布高
            height: '100%',
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    [Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55)].join(',') +
                    ')'
                  )
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#2ac'
              }
            },
            data: []
          }
        ]
      },
      optionZZFBXX: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br>{a}:{c}个'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        yAxis: {
          type: 'value',
          name: '个',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        series: [
          {
            name: '',
            type: 'line',
            areaStyle: {},
            data: []
          }
          
        ]
        // isShow: false,
        // title: {
        //   //   text: '农产品劳动力需求分析'
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
        //   formatter: function(params, ticket, callback) {
        //     var htmlStr = ''
        //     for (var i = 0; i < params.length; i++) {
        //       var param = params[i]
        //       var xName = param.name // x轴的名称
        //       var seriesName = param.seriesName // 图例名称
        //       var value = param.value // y轴值
        //       var color = param.color // 图例颜色
        //       if (i === 0) {
        //         htmlStr += xName + '<br/>' // x轴的名称
        //       }
        //       htmlStr += '<div>'
        //       htmlStr +=
        //         '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        //       htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
        //       htmlStr += '</div>'
        //     }
        //     return htmlStr
        //   }
        // },
        // legend: {},
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        // toolbox: {},
        // xAxis: {
        //   type: 'category',
        //   boundaryGap: false, // 坐标轴两边留白
        //   data: [],
        //   axisTick: {
        //     // 坐标轴刻度相关设置。
        //     show: false
        //   },
        //   splitLine: {
        //     // 坐标轴在 grid 区域中的分隔线。
        //     show: false,
        //     lineStyle: {
        //       color: '#E5E9ED'
        //       // 	opacity:0.1
        //     }
        //   }
        // },
        // yAxis: [
        //   {
        //     type: 'value',
        //     name: '个',
        //     splitNumber: 5
        //   }
        // ],
        // series: [
        //   {
        //     name: '',
        //     type: 'line',
        //     smooth: true,
        //     itemStyle: {
        //       normal: {
        //         color: '#3A84FF',
        //         lineStyle: {
        //           color: '#3A84FF',
        //           width: 1
        //         },
        //         areaStyle: {
        //           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //             {
        //               offset: 0,
        //               color: 'rgba(58,132,255,0)'
        //             },
        //             {
        //               offset: 1,
        //               color: 'rgba(58,132,255,0.35)'
        //             }
        //           ])
        //         }
        //       }
        //     },
        //     data: []
        //   }
        // ]
      },
      optionJscgjzlzrje: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br>{a}:{c}亿元'
        },
        legend: {
          data: ['蒸发量', '降水量', '平均温度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        yAxis: {
          type: 'value',
          name: '亿元',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        series: []
      },
      optionZscpzlzr: {
        isShow: false,
        tooltip: tooltip('个', '个'),
        legend: {
          data: ['蒸发量', '降水量', '平均温度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        yAxis: {
          type: 'value',
          name: '个',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        series: []
      },
      table: {
        url: '/cybd/api/agri/agriTechPrize/queryList',
        columns: [
          {
            prop: 'firstAchieveUnit',
            label: '第一完成单位'
          },
          {
            prop: 'achieveMen',
            label: '完成人'
          }
        ]
      },
      table_2: {
        url: '/cybd/api/agri/policy/queryList',
        columns: [
          {
            prop: 'policyName',
            label: '政策名称'
          },
          {
            prop: 'publishUnit',
            label: '发布机构'
          },
          {
            prop: 'source',
            label: '来源'
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    toFour(name, isCodew, typeCode) {
      if (name === isCodew) {
        this.$router.push({ name: 'Fourstage', query: { code: '000204', name: this.$route.matched[0].name, typeCode: typeCode || isCodew } })
      }
    },
    init() {
      getTowSideStat({ groupCode: 'NYPX' }).then((data) => {
        const val = data.body
        // console.log('val', val)
        const optionCyrkqk = this.optionCyrkqk
        optionCyrkqk.xAxis.data = val.dateSet
        optionCyrkqk.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          optionCyrkqk.series.push({
            name: item,
            type: 'bar',
            data: val.typeValueListMap[item],
            yAxisIndex: index
          })
        })
        optionCyrkqk.isShow = true
        this.toLink(this, 'nypx', (p) => {
          this.toFour(p.seriesName, '参培人数', '农业培训人数')
          this.toFour(p.seriesName, '培训次数', '农业培训场次')
        })
      })
      getTowSideStat({ groupCode: 'ZJFWQK' }).then((res) => {
        this.optionZjfuqk.xAxis[0].data = res.body.dateSet
        this.optionZjfuqk.legend.data = res.body.typeSet
        var obj = res.body.typeValueListMap
        var key = []
        var value = []
        for (var i in obj) {
          key.push(i)
          value.push(obj[i])
        }
        this.optionZjfuqk.series[0].data = value[0]
        this.optionZjfuqk.series[0].name = key[0]
        this.optionZjfuqk.series[1].data = value[1]
        this.optionZjfuqk.series[1].name = key[1]
        this.optionZjfuqk.series[2].data = value[2]
        this.optionZjfuqk.series[2].name = key[2]
        this.optionZjfuqk.isShow = true
      })
      hotWords({ type: 'NYTP' }).then((res) => {
        this.hotWordsList.series[0].data = res.body.data.map((item, index) => {
          return {
            name: item.name,
            value: item.number
          }
        })
        this.hotWordsList.isShow = true
      })

      // 农业政策
      getTowSideStat({ groupCode: 'ZZFBXX' }).then((res) => {
        const val = res.body
        this.optionZZFBXX.xAxis.data = val.dateSet
        this.optionZZFBXX.series[0].name = '政策发布数量'
        this.optionZZFBXX.series[0].data = val.typeValueListMap['政策发布数量']
        this.optionZZFBXX.isShow = true
      })
      getTowSideStat({ groupCode: 'ZSCPJZLZR' }).then((data) => {
        const val = data.body
        const option = this.optionZscpzlzr
        const optionJscgjzlzrje = this.optionJscgjzlzrje
        optionJscgjzlzrje.xAxis.data = option.xAxis.data = val.dateSet
        optionJscgjzlzrje.legend.data = option.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item, index) => {
          if (item.indexOf('金额') === -1) {
            option.series.push({
              name: item,
              type: 'bar',
              data: val.typeValueListMap[item]
            })
          } else {
            optionJscgjzlzrje.series.push({
              name: item,
              type: 'line',
              areaStyle: {},
              data: val.typeValueListMap[item]
            })
          }
        })
        option.isShow = true
        optionJscgjzlzrje.isShow = true
        this.toLink(this, 'zscpjzlzr', (p) => {
          console.log(p)
          this.toFour(p.seriesName, '涉农技术专利转让数量', '品种种植涉农专利转让数')
          this.toFour(p.seriesName, '涉农科技成果转让数量', '农业科技成果转让数')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.el-table {
  background-color: transparent !important;
}
</style>
